<template>
    <el-dialog title="选择" append-to-body :visible="visible" width="980px" @close="onClose" @open="onOpen">
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" highlight-current-row @row-click="selectData">
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.id">{{""}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="原物料ID" width="auto" align="center"></el-table-column>
          <el-table-column prop="name" label="原物料名称" width="auto" align="center"></el-table-column>
          <el-table-column prop="brand" label="品牌" width="auto" align="center"></el-table-column>
          <el-table-column prop="specification" label="规格" width="auto" align="center"></el-table-column>
          <el-table-column prop="typeName" label="类型" width="auto" align="center"></el-table-column>
          <el-table-column prop="enable" label="状态" width="auto" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.enable == 0" style="color:#969799;">禁用</span>
              <span v-if="scope.row.enable == 1" style="color:#00A754;">启用</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page.sync="params.page" :page-size="params.pageSize" layout="total, prev, pager, next, jumper" :total="total" @current-change="ListChoicePagingFun(true)"></el-pagination>
        <span slot="footer" class="dialog-footer">
            <el-button class="bottom_all_two" @click="onClose">取 消</el-button>
            <el-button class="bottom_all" type="primary" @click="onConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import { rawMaterialsQueryPage } from "@/api/internetSales/projectClarifi.js";

    export default {
        data() {
            return {
                radio: null, // 单选框
                select: {}, // 选择的数据
                tableData: [], // 表格数据
                params: {
                    page: 1,
                    pageSize: 5
                },
                total: 0
            };
        },
        props: {
            config: {
                type: Object,
                default: () => {},
            },
            // 控制dialog显示
            visible: {
                type: Boolean,
            },
        },
        methods: {
            // 选择数据
            selectData(row) {
                this.radio = row.id;
                this.select = row
            },
            // 原物料单选列表查询
            ListChoicePagingFun() {
                rawMaterialsQueryPage(this.params).then((res) => {
                    this.tableData = res.data.data
                    this.total = res.data.totalRows
                })
            },  
            onOpen() {
                this.ListChoicePagingFun()
            },
            onClose() {
                this.$emit('update:visible', false);
            },
            onConfirm() {
                this.$emit('updated', this.select);
                this.$emit('update:visible', false);
            },

        },
    };
</script>

<style lang="scss" scoped>
</style>
